<template>
<view class="app">
    <view class="store_list">
        <view class="item" v-for="item in accountList" :key="item.user_id" @click="toIndex(item)">
            <view class="left">
                <view class="avatar"><image :src="item.user_picture"></image></view>
                <view class="info">
                    <view class="name">
                        <text>{{item.nick_name}}</text>
                        <image v-if="item.vip_level == 0" src="../../../static/images/publicicon/icon_vipwei.png"></image>
                        <image v-else src="../../../static/images/publicicon/icon_vipkai.png"></image>
                    </view>
                    <text class="role">{{item.role_name}}</text>
                </view>
            </view>
            <view class="right">
                <image src="../../../static/images/publicicon/arrow.png"></image>
            </view>
        </view>

    </view>
    </view>
</template>

<script>

import { getAccountList } from '@/api/common/index'
import qs from 'qs'

export default {
	data() {
		return {
			accountList: []
		}
	},
	onLoad() {
		this.getAccountList()
	},
	methods: {
		getAccountList() {
			getAccountList().then(res => {
				this.accountList = res.data.childrenAccountList.unshift(res.data.self) || []
			})
		},
		toIndex(item) {
			const params = {
				owner_user_id: item.user_id,
				share_user_id: item.user_id
			}
			// if (item.role_id == 1) {
			// 	uni.navigateTo({
			// 		url: `/pages/design/designCompany/indexNew?${qs.stringify(params)}`
			// 	})
			// } else {
			uni.navigateTo({
				url: `/pages/webview/index?user_id=${item.user_id}&role_id=${item.role_id}`
			})
			// }
		}
	}
}
</script>

<style scoped lang="scss">
.app {
    min-height: 100vh;
    background-color: #F5F5F5;
}
.store_list {
    padding-left: 30px;
    background-color: #fff;
    .item {
        height:120px;
        background:rgba(255,255,255,1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 30px;
        & + .item {
            border-top: 1px solid rgba(238,238,238,1)
        }
        .left {
            display: flex;
            align-items: center;
            .avatar {
                width: 90px;
                height: 90px;
                border-radius: 50%;
                overflow: hidden;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .info {
                padding-left: 19px;
                height: 90px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .name {
                    font-size:30px;
                    font-weight:600;
                    color:rgba(51,51,51,1);
                    line-height: 1;
                    display: flex;
                    align-items: center;
                    image {
                        width: 42px;
                        height: 37px;
                        margin-left: 6px;
                    }
                }
                .role {
                    font-size:24px;
                    color:rgba(153,153,153,1);
                }
            }
        }
        .right {
            image {
                width: 18px;
                height: 18px;
            }
        }
    }
}
</style>
